---
title: Links
image: /images/user-guide/what-is-twenty/20.png
---

<Frame>
  <img src="/images/user-guide/what-is-twenty/20.png" alt="Header" />
</Frame>

## Kontaktlink

A stylized link component for displaying contact information.

<Tabs>
<Tab title="Usage">

```jsx
import { BrowserRouter as Router } from 'react-router-dom';

import { ContactLink } from 'twenty-ui/navigation';

export const MyComponent = () => {
  const handleLinkClick = (event) => {
    console.log('Contact link clicked!', event);
  };

  return (
    <Router>
      <ContactLink
        className
        href="mailto:example@example.com"
        onClick={handleLinkClick}
      >
        example@example.com
      </ContactLink>
    </Router>
  );
};
```

</Tab>
<Tab title="Props">

| Props       | Typ               | Beschreibung                                                    |
| ----------- | ----------------- | --------------------------------------------------------------- |
| Klassenname | Zeichenkette      | Optionaler Name für zusätzliche Gestaltung                      |
| href        | Zeichenkette      | Die Ziel-URL oder der Pfad für den Link                         |
| onClick     | Funktion          | Callback-Funktion, die beim Klicken auf den Link ausgelöst wird |
| Kinder      | `React.ReactNode` | Der Inhalt, der innerhalb des Links angezeigt wird              |

</Tab>

</Tabs>

## Rohlink

A stylized link component for displaying links.

<Tabs>
<Tab title="Usage">

```jsx
import { RawLink } from "/navigation";
import { BrowserRouter as Router } from "react-router-dom";

export const MyComponent = () => {
  const handleLinkClick = (event) => {
    console.log("Contact link clicked!", event);
  };

  return (
    <Router>
      <RawLink className href="/contact" onClick={handleLinkClick}>
        Contact Us
      </RawLink>
    </Router>
  );
};

```

</Tab>
<Tab title="Props">

| Props     | Typ               | Beschreibung                                                    |
| --------- | ----------------- | --------------------------------------------------------------- |
| className | Zeichenkette      | Optionaler Name für zusätzliche Stilierung                      |
| href      | Zeichenkette      | Die Ziel-URL oder der Pfad für den Link                         |
| beiKlick  | function          | Callback-Funktion, die beim Klicken auf den Link ausgelöst wird |
| Kinder    | `React.ReactNode` | Der Inhalt, der innerhalb des Links angezeigt wird              |

</Tab>
</Tabs>

## Rundlink

A rounded-styled link with a Chip component for links.

<Tabs>
<Tab title="Usage">

```jsx
import { RoundedLink } from "/navigation";
import { BrowserRouter as Router } from "react-router-dom";

export const MyComponent = () => {
  const handleLinkClick = (event) => {
    console.log("Contact link clicked!", event);
  };

  return (
    <Router>
      <RoundedLink href="/contact" onClick={handleLinkClick}>
        Contact Us
      </RoundedLink>
    </Router>
  );
};
```

</Tab>

<Tab title="Props">

| Props   | Typ               | Beschreibung                                                    |
| ------- | ----------------- | --------------------------------------------------------------- |
| href    | Zeichenkette      | Die Ziel-URL oder der Pfad für den Link                         |
| Kinder  | `React.ReactNode` | Der Inhalt, der innerhalb des Links angezeigt wird              |
| onClick | Funktion          | Callback-Funktion, die beim Klicken auf den Link ausgelöst wird |

</Tab>
</Tabs>

## Sozialer Link

Stilisierte soziale Links mit Unterstützung für verschiedene soziale Linktypen wie URLs, LinkedIn und X (oder Twitter).

<Tabs>
<Tab title="Usage">

```jsx
import { SocialLink } from "twenty-ui/navigation";
import { BrowserRouter as Router } from "react-router-dom";

export const MyComponent = () => {
  return (
    <Router>
      <SocialLink
        type="twitter"
        href="https://twitter.com/twentycrm"
      ></SocialLink>
    </Router>
  );
};
```

</Tab>
<Tab title="Props">

| Props   | Typ               | Beschreibung                                                                                               |
| ------- | ----------------- | ---------------------------------------------------------------------------------------------------------- |
| href    | Zeichenkette      | Die Ziel-URL oder der Pfad für den Link                                                                    |
| Kinder  | `React.ReactNode` | Der Inhalt, der innerhalb des Links angezeigt wird                                                         |
| typ     | Zeichenkette      | Die Art der sozialen Links. Optionen sind: `url`, `LinkedIn` und `Twitter` |
| onClick | Funktion          | Callback-Funktion, die beim Klicken auf den Link ausgelöst wird                                            |

</Tab>
</Tabs>
